<!--
 * @Author: daidai
 * @Date: 2022-03-04 09:23:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-05-07 11:05:02
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\index.vue
-->
<template>
	<div class="contents">
		<div class="contetn_left">
			<div style="margin: 2px 0 3px 0;display: flex;align-items: center;justify-content: space-between;">
				<div class="pagetab">
					<div class="item">AAO生物池进水</div>
				</div>
				<div class="pagetab" style="display: flex;align-items: flex-end;">
					<div class="text-item">23857.04</div>
					<span style="margin-left: 5px;">m³/h</span>
				</div>
			</div>

			<ItemWrap class="contetn_left-top contetn_lr-item" title="进水水质">
				<LeftTop />

			</ItemWrap>
			<ItemWrap class="contetn_left-center contetn_lr-item" title="趋势">
				<div style="display: flex;align-items: center;justify-content: center;">
					<div :class="currentSelect === item.value ? 'qushi-item qushi-item-active' : 'qushi-item'"
						v-for="item in options">{{item.label}}</div>
				</div>
				<div style="text-align: right;margin-top: 10px;font-size: 12px;">单位: m³/h</div>
				<RightTop />
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="实时巡检">
				<div class="header-wrapper">
					<div class="header-item">报警项目</div>
					<div class="header-item">报警信息</div>
					<div class="header-item">数值</div>
					<div class="header-item">单位</div>
				</div>
				<LeftBottom />
			</ItemWrap>
		</div>
		<div class="contetn_center">
			<div class="toolbar-top-wrapper">
				<div :class="currentBar === item.value ? 'toolbar-item toolbar-item-active' : 'toolbar-item'" v-for="item in toolbars">{{item.label}}</div>
			</div>
			<!-- <CenterMap class="contetn_center_top" />
			<ItemWrap class="contetn_center-bottom" title="安装计划">
				<CenterBottom />
			</ItemWrap> -->
			<div class="center-bottom-wrapper">当前模式：最低成本运行</div>
		</div>
		<div class="contetn_right">
			<div style="margin: 2px 0 3px 0;display: flex;align-items: center;justify-content: space-between;">
				<div class="pagetab">
					<div class="item">AAO生物池出水</div>
				</div>
				<div class="pagetab" style="display: flex;align-items: flex-end;">
					<div class="text-item">23734.02</div>
					<span style="margin-left: 5px;">m³/h</span>
				</div>
			</div>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="出水水质">
				<div class="header-wrapper">
					<div class="header-item">指标</div>
					<div class="header-item">标准值</div>
					<div class="header-item">预测值</div>
					<div class="header-item">实测值</div>
					<div class="header-item">单位</div>
				</div>
				<div class="table-content-wrapper" v-for="item in tableData">
					<div class="table-content-item">{{item.name}}</div>
					<div class="table-content-item">{{item.simulatedValue}}</div>
					<div class="table-content-item">{{item.predictedValue}}</div>
					<div class="table-content-item">{{item.actualValue}}</div>
					<div class="table-content-item">mg/L</div>
				</div>
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="趋势" style="padding: 0 10px 16px 10px">
				<div style="display: flex;align-items: center;justify-content: center;">
					<div :class="currentSelect === item.value ? 'qushi-item qushi-item-active' : 'qushi-item'"
						v-for="item in options">{{item.label}}</div>
				</div>
				<div style="text-align: right;margin-top: 10px;font-size: 12px;">单位: m³/h</div>
				<RightTop />
			</ItemWrap>
			<ItemWrap class="contetn_left-bottom contetn_lr-item" title="有限空间管理 ">
				<div class="header-wrapper">
					<div class="header-item">区域名称</div>
					<div class="header-item">空间大小</div>
					<div class="header-item">危险程度</div>
				</div>
				<RightBottom />
			</ItemWrap>
		</div>
	</div>
</template>

<script>
	import LeftTop from './left-top.vue'
	import LeftCenter from "./left-center.vue";
	import LeftBottom from "./left-bottom.vue";
	import CenterMap from "./center-map.vue";
	import CenterBottom from "./center-bottom.vue";
	import RightTop from "./right-top.vue";
	import RightCenter from "./right-center.vue";
	import RightBottom from "./right-bottom.vue";

	export default {
		components: {
			LeftTop,
			LeftCenter,
			LeftBottom,
			CenterMap,
			RightTop,
			RightCenter,
			RightBottom,
			CenterBottom,
		},
		data() {
			return {
				currentBar: "首页",
				toolbars: [{
					label: "首页",
					value: "首页"
				}, {
					label: "AAO生物池",
					value: "AAO生物池"
				}, {
					label: "调节池",
					value: "调节池"
				}, {
					label: "初沉池",
					value: "初沉池"
				}, {
					label: "水解酸化池",
					value: "水解酸化池"
				}, {
					label: "缺氧池",
					value: "缺氧池"
				}, {
					label: "好氧池",
					value: "好氧池"
				}],
				currentSelect: "流量",
				options: [{
					label: "流量",
					value: "流量"
				}, {
					label: "COD",
					value: "COD"
				}, {
					label: "NH3-N",
					value: "NH3-N"
				}, {
					label: "TN",
					value: "TN"
				}, {
					label: "TP",
					value: "TP"
				}, {
					label: "PH",
					value: "PH"
				}],
				tableData: [{
					name: 'COD(总)',
					actualValue: "6.75",
					simulatedValue: "10.59",
					predictedValue: "9.99"
				}, {
					name: 'NH3-N(总)',
					actualValue: "6.75",
					simulatedValue: "10.59",
					predictedValue: "9.99"
				}, {
					name: 'TN',
					actualValue: "6.75",
					simulatedValue: "10.59",
					predictedValue: "9.99"
				}, {
					name: 'TP',
					actualValue: "6.75",
					simulatedValue: "10.59",
					predictedValue: "9.99"
				}, {
					name: 'PH',
					actualValue: "6.75",
					simulatedValue: "10.59",
					predictedValue: "9.99"
				}]
			};
		},
		filters: {
			numsFilter(msg) {
				return msg || 0;
			},
		},
		created() {},

		mounted() {},
		methods: {

		},
	};
</script>
<style lang="scss" scoped>
	// 内容
	.contents {

		.toolbar-top-wrapper {
			background-color: rgba(3, 5, 12, 1);
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: -1px;
			border-radius: 5px;
		}
		
		.toolbar-item {
			letter-spacing: 2px;
			padding: 12px 0;
			flex: 1;
			color: #fff;
			font-size: 16px;
			display: flex;
			justify-content: center;
			font-weight: 600;
			border-radius: 5px;
		}
		
		.center-bottom-wrapper {
			position: absolute;
			bottom: 0;
			background-color: rgba(3, 5, 12, 0.3);
			padding: 10px;
			color: #fff;
			font-size: 16px;
			width: 97%;
			text-align: center;
		}
		
		.toolbar-item-active {
			background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
		}

		.qushi-item {
			padding: 5px 10px;
			border: 1px solid #01aaff;
			color: #fff;
			border-radius: 5px;
			font-size: 13px;
		}

		.qushi-item:not(:first-child) {
			margin-left: 15px;
		}

		.qushi-item-active {
			background: linear-gradient(92deg, #0072ff 0%, #00eaff 48.8525390625%, #01aaff 100%);
		}

		.header-wrapper {
			margin-top: 10px;
			padding: 10px 0;
			background-color: rgba(1, 170, 255, .3);
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.header-item {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.table-content-wrapper {
			padding: 10px 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
		}

		.table-content-item {
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.contetn_left,
		.contetn_right {
			width: 510px;
			box-sizing: border-box;
			background-color: rgba(3, 5, 12, 0.8);
			border-top-left-radius: 20px;
			border-bottom-left-radius: 20px;
			padding: 5px 10px;
			margin-top: 5px;
		}

		.contetn_center {
			width: 860px;
			position: relative;
		}

		//左右两侧 三个块
		.contetn_lr-item {
			height: 280px;
		}

		.contetn_center_top {
			width: 100%;
		}

		// 中间
		.contetn_center {
			display: flex;
			flex-direction: column;
			// justify-content: space-around;
		}

		.contetn_center-bottom {
			height: 315px;
		}

		//左边 右边 结构一样
		.contetn_left,
		.contetn_right {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			position: relative;


		}
	}


	@keyframes rotating {
		0% {
			-webkit-transform: rotate(0) scale(1);
			transform: rotate(0) scale(1);
		}

		50% {
			-webkit-transform: rotate(180deg) scale(1.1);
			transform: rotate(180deg) scale(1.1);
		}

		100% {
			-webkit-transform: rotate(360deg) scale(1);
			transform: rotate(360deg) scale(1);
		}
	}
</style>